<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="ios-top-nav">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="back-btn" @tap="goBack">
					<image src="/static/icons/back.png" mode="aspectFit"></image>
				</view>
				<text class="nav-title">{{courseInfo.courseName}}</text>
				<view class="nav-actions">
					<view class="action-btn" @tap="toggleFullscreen">
						<image src="/static/icons/fullscreen.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 直播区域 -->
			<view class="live-section">
				<view class="live-player">
					<image src="/static/course/live-placeholder.png" mode="aspectFit"></image>
					<view class="live-status">
						<view class="status-dot"></view>
						<text>直播中</text>
					</view>
				</view>
				<view class="teacher-info">
					<image :src="courseInfo.teacherAvatar" mode="aspectFill" class="teacher-avatar"></image>
					<view class="teacher-details">
						<text class="teacher-name">{{courseInfo.teacherName}}</text>
						<text class="teacher-title">{{courseInfo.teacherTitle}}</text>
					</view>
				</view>
			</view>
			
			<!-- 课程信息 -->
			<view class="course-info">
				<view class="info-header">
					<text class="course-title">{{courseInfo.courseName}}</text>
					<text class="course-time">{{courseInfo.currentTime}}</text>
				</view>
				<view class="info-stats">
					<view class="stat-item">
						<image src="/static/icons/viewers.png" mode="aspectFit"></image>
						<text>{{courseInfo.viewerCount}}人观看</text>
					</view>
					<view class="stat-item">
						<image src="/static/icons/likes.png" mode="aspectFit"></image>
						<text>{{courseInfo.likeCount}}点赞</text>
					</view>
					<view class="stat-item">
						<image src="/static/icons/comments.png" mode="aspectFit"></image>
						<text>{{courseInfo.commentCount}}评论</text>
					</view>
				</view>
			</view>
			
			<!-- 互动区域 -->
			<view class="interaction-section">
				<view class="section-header">
					<text class="section-title">课堂互动</text>
					<view class="interaction-tabs">
						<view 
							v-for="(tab, index) in interactionTabs" 
							:key="index"
							class="tab-item"
							:class="{ active: currentTab === index }"
							@tap="switchTab(index)">
							<text>{{tab}}</text>
						</view>
					</view>
				</view>
				
				<!-- 聊天区域 -->
				<view class="chat-area" v-if="currentTab === 0">
					<scroll-view 
						scroll-y 
						class="chat-list"
						:scroll-top="chatScrollTop"
						:scroll-into-view="scrollIntoView"
						@scrolltoupper="loadMoreChats">
						<view class="chat-item" v-for="(item, index) in chatList" :key="index" :id="'chat-' + index">
							<view class="chat-avatar">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="chat-content">
								<view class="chat-header">
									<text class="chat-name">{{item.name}}</text>
									<text class="chat-time">{{item.time}}</text>
								</view>
								<text class="chat-message">{{item.message}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="chat-input">
						<input 
							type="text" 
							v-model="chatMessage"
							placeholder="发送消息..."
							@confirm="sendMessage"
						/>
						<view class="send-btn" @tap="sendMessage">
							<image src="/static/icons/send.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				
				<!-- 课件区域 -->
				<view class="courseware-area" v-if="currentTab === 1">
					<scroll-view scroll-y class="courseware-list">
						<view class="courseware-item" v-for="(item, index) in coursewareList" :key="index">
							<view class="courseware-info">
								<image :src="getFileIcon(item.type)" mode="aspectFit"></image>
								<view class="courseware-details">
									<text class="courseware-name">{{item.name}}</text>
									<text class="courseware-size">{{formatFileSize(item.size)}}</text>
								</view>
							</view>
							<view class="download-btn" @tap="downloadCourseware(item)">
								<image src="/static/icons/download.png" mode="aspectFit"></image>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<!-- 提问区域 -->
				<view class="question-area" v-if="currentTab === 2">
					<scroll-view scroll-y class="question-list">
						<view class="question-item" v-for="(item, index) in questionList" :key="index">
							<view class="question-header">
								<text class="question-title">{{item.title}}</text>
								<text class="question-time">{{item.time}}</text>
							</view>
							<text class="question-content">{{item.content}}</text>
							<view class="question-footer">
								<view class="action-btn" @tap="likeQuestion(item)">
									<image src="/static/icons/like.png" mode="aspectFit"></image>
									<text>{{item.likes}}</text>
								</view>
								<view class="action-btn" @tap="answerQuestion(item)">
									<image src="/static/icons/answer.png" mode="aspectFit"></image>
									<text>{{item.answers}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="ask-question-btn" @tap="showAskQuestionModal">
						<image src="/static/icons/ask.png" mode="aspectFit"></image>
						<text>提问</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提问弹窗 -->
		<view class="question-modal" v-if="showQuestionModal">
			<view class="modal-content">
				<view class="modal-header">
					<text>提问</text>
					<view class="close-btn" @tap="hideAskQuestionModal">
						<image src="/static/icons/close.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="modal-body">
					<input 
						type="text" 
						v-model="questionTitle"
						placeholder="请输入问题标题"
						class="question-title-input"
					/>
					<textarea 
						v-model="questionContent"
						placeholder="请详细描述你的问题..."
						class="question-content-input"
					></textarea>
				</view>
				<view class="modal-footer">
					<view class="cancel-btn" @tap="hideAskQuestionModal">取消</view>
					<view class="submit-btn" @tap="submitQuestion">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			courseInfo: {
				courseName: "高等数学",
				teacherName: "张教授",
				teacherTitle: "数学系主任",
				teacherAvatar: "/static/avatars/teacher.png",
				currentTime: "14:30 - 16:00",
				viewerCount: 128,
				likeCount: 256,
				commentCount: 89
			},
			interactionTabs: ['聊天', '课件', '提问'],
			currentTab: 0,
			chatScrollTop: 0,
			scrollIntoView: '',
			chatMessage: '',
			chatList: [
				{
					avatar: "/static/avatars/user1.png",
					name: "学生A",
					time: "14:35",
					message: "老师讲得真清楚！"
				},
				{
					avatar: "/static/avatars/user2.png",
					name: "学生B",
					time: "14:36",
					message: "这个公式推导过程很详细"
				}
			],
			coursewareList: [
				{
					name: "第三章课件.pdf",
					type: "pdf",
					size: 2048576
				},
				{
					name: "练习题.docx",
					type: "doc",
					size: 1048576
				}
			],
			questionList: [
				{
					title: "关于导数的概念",
					content: "老师，我想问一下导数的几何意义是什么？",
					time: "14:40",
					likes: 5,
					answers: 2
				}
			],
			showQuestionModal: false,
			questionTitle: '',
			questionContent: ''
		}
	},
	onLoad(options) {
		// 接收页面参数
		this.courseInfo.courseName = decodeURIComponent(options.courseName || '');
		this.courseInfo.teacherName = decodeURIComponent(options.teacher || '');
		this.courseInfo.location = decodeURIComponent(options.location || '');
		this.courseInfo.isLive = options.isLive === 'true';
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		toggleFullscreen() {
			// 实现全屏切换
		},
		switchTab(index) {
			this.currentTab = index;
		},
		loadMoreChats() {
			// 加载更多聊天记录
		},
		sendMessage() {
			if (!this.chatMessage.trim()) return;
			
			const now = new Date();
			const time = now.getHours().toString().padStart(2, '0') + ':' + 
						now.getMinutes().toString().padStart(2, '0');
			
			this.chatList.push({
				avatar: "/static/avatars/user.png",
				name: "我",
				time: time,
				message: this.chatMessage
			});
			
			this.chatMessage = '';
			this.$nextTick(() => {
				this.scrollToBottom();
			});
		},
		scrollToBottom() {
			if (this.chatList.length > 0) {
				this.scrollIntoView = 'chat-' + (this.chatList.length - 1);
			}
		},
		getFileIcon(type) {
			switch(type) {
				case 'pdf':
					return '/static/icons/file-pdf.png';
				case 'doc':
					return '/static/icons/file-word.png';
				default:
					return '/static/icons/file-default.png';
			}
		},
		formatFileSize(size) {
			if (size < 1024) {
				return size + 'B';
			} else if (size < 1024 * 1024) {
				return (size / 1024).toFixed(1) + 'KB';
			} else {
				return (size / (1024 * 1024)).toFixed(1) + 'MB';
			}
		},
		downloadCourseware(item) {
			uni.showToast({
				title: '开始下载：' + item.name,
				icon: 'none'
			});
		},
		likeQuestion(item) {
			item.likes++;
		},
		answerQuestion(item) {
			// 实现回答问题的功能
		},
		showAskQuestionModal() {
			this.showQuestionModal = true;
		},
		hideAskQuestionModal() {
			this.showQuestionModal = false;
			this.questionTitle = '';
			this.questionContent = '';
		},
		submitQuestion() {
			if (!this.questionTitle.trim() || !this.questionContent.trim()) {
				uni.showToast({
					title: '请填写完整的问题信息',
					icon: 'none'
				});
				return;
			}
			
			const now = new Date();
			const time = now.getHours().toString().padStart(2, '0') + ':' + 
						now.getMinutes().toString().padStart(2, '0');
			
			this.questionList.unshift({
				title: this.questionTitle,
				content: this.questionContent,
				time: time,
				likes: 0,
				answers: 0
			});
			
			this.hideAskQuestionModal();
		}
	}
}
</script>

<style lang="scss">
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--ios-light-bg, #F2F2F7);
}

/* iOS顶部导航栏 */
.ios-top-nav {
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
	
	.status-bar {
		height: var(--status-bar-height, 20px);
	}
	
	.nav-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		min-height: 44px;
	}
	
	.back-btn {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			width: 20px;
			height: 20px;
		}
	}
	
	.nav-title {
		font-size: 17px;
		font-weight: 600;
		color: #000;
	}
	
	.nav-actions {
		.action-btn {
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 20px;
				height: 20px;
			}
		}
	}
}

/* 主内容区域 */
.main-content {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 直播区域 */
.live-section {
	background-color: #000;
	position: relative;
	
	.live-player {
		width: 100%;
		height: 200px;
		position: relative;
		
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.live-status {
			position: absolute;
			top: 12px;
			right: 12px;
			background-color: rgba(255, 59, 48, 0.9);
			padding: 4px 8px;
			border-radius: 4px;
			display: flex;
			align-items: center;
			
			.status-dot {
				width: 6px;
				height: 6px;
				background-color: #FFFFFF;
				border-radius: 3px;
				margin-right: 4px;
				animation: pulse 1.5s infinite;
			}
			
			text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}
	
	.teacher-info {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 12px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
		display: flex;
		align-items: center;
		
		.teacher-avatar {
			width: 40px;
			height: 40px;
			border-radius: 20px;
			margin-right: 12px;
		}
		
		.teacher-details {
			.teacher-name {
				color: #FFFFFF;
				font-size: 16px;
				font-weight: 500;
				display: block;
			}
			
			.teacher-title {
				color: rgba(255, 255, 255, 0.8);
				font-size: 12px;
				margin-top: 2px;
			}
		}
	}
}

/* 课程信息 */
.course-info {
	background-color: var(--ios-card-bg, #FFFFFF);
	padding: 16px;
	
	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
		
		.course-title {
			font-size: 18px;
			font-weight: 600;
			color: #000;
		}
		
		.course-time {
			font-size: 14px;
			color: #8e8e93;
		}
	}
	
	.info-stats {
		display: flex;
		justify-content: space-around;
		
		.stat-item {
			display: flex;
			align-items: center;
			
			image {
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}
			
			text {
				font-size: 14px;
				color: #8e8e93;
			}
		}
	}
}

/* 互动区域 */
.interaction-section {
	background-color: var(--ios-card-bg, #FFFFFF);
	margin-top: 12px;
	
	.section-header {
		padding: 16px;
		border-bottom: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
		
		.section-title {
			font-size: 17px;
			font-weight: 600;
			color: #000;
			margin-bottom: 12px;
			display: block;
		}
		
		.interaction-tabs {
			display: flex;
			background-color: var(--ios-light-bg, #F2F2F7);
			border-radius: 8px;
			padding: 4px;
			
			.tab-item {
				flex: 1;
				text-align: center;
				padding: 6px 0;
				font-size: 14px;
				color: #8e8e93;
				position: relative;
				
				&.active {
					color: #007AFF;
					font-weight: 500;
					
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 20px;
						height: 2px;
						background-color: #007AFF;
						border-radius: 1px;
					}
				}
			}
		}
	}
	
	/* 聊天区域 */
	.chat-area {
		display: flex;
		flex-direction: column;
		height: 400px;
		
		.chat-list {
			flex: 1;
			padding: 16px;
			
			.chat-item {
				display: flex;
				margin-bottom: 16px;
				
				.chat-avatar {
					width: 36px;
					height: 36px;
					border-radius: 18px;
					margin-right: 12px;
					flex-shrink: 0;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 18px;
					}
				}
				
				.chat-content {
					flex: 1;
					
					.chat-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 4px;
						
						.chat-name {
							font-size: 14px;
							font-weight: 500;
							color: #000;
						}
						
						.chat-time {
							font-size: 12px;
							color: #8e8e93;
						}
					}
					
					.chat-message {
						font-size: 14px;
						color: #333;
						line-height: 1.4;
					}
				}
			}
		}
		
		.chat-input {
			display: flex;
			align-items: center;
			padding: 12px 16px;
			border-top: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
			
			input {
				flex: 1;
				height: 36px;
				background-color: var(--ios-light-bg, #F2F2F7);
				border-radius: 18px;
				padding: 0 16px;
				font-size: 14px;
				margin-right: 12px;
			}
			
			.send-btn {
				width: 36px;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 20px;
					height: 20px;
				}
			}
		}
	}
	
	/* 课件区域 */
	.courseware-area {
		height: 400px;
		
		.courseware-list {
			height: 100%;
			padding: 16px;
			
			.courseware-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12px;
				background-color: var(--ios-light-bg, #F2F2F7);
				border-radius: 8px;
				margin-bottom: 12px;
				
				.courseware-info {
					display: flex;
					align-items: center;
					flex: 1;
					
					image {
						width: 32px;
						height: 32px;
						margin-right: 12px;
					}
					
					.courseware-details {
						flex: 1;
						
						.courseware-name {
							font-size: 14px;
							color: #000;
							margin-bottom: 4px;
							display: block;
						}
						
						.courseware-size {
							font-size: 12px;
							color: #8e8e93;
						}
					}
				}
				
				.download-btn {
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					
					image {
						width: 20px;
						height: 20px;
					}
				}
			}
		}
	}
	
	/* 提问区域 */
	.question-area {
		height: 400px;
		
		.question-list {
			height: 100%;
			padding: 16px;
			
			.question-item {
				background-color: var(--ios-light-bg, #F2F2F7);
				border-radius: 8px;
				padding: 12px;
				margin-bottom: 12px;
				
				.question-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8px;
					
					.question-title {
						font-size: 14px;
						font-weight: 500;
						color: #000;
					}
					
					.question-time {
						font-size: 12px;
						color: #8e8e93;
					}
				}
				
				.question-content {
					font-size: 14px;
					color: #333;
					line-height: 1.4;
					margin-bottom: 8px;
					display: block;
				}
				
				.question-footer {
					display: flex;
					justify-content: flex-end;
					
					.action-btn {
						display: flex;
						align-items: center;
						margin-left: 16px;
						
						image {
							width: 16px;
							height: 16px;
							margin-right: 4px;
						}
						
						text {
							font-size: 12px;
							color: #8e8e93;
						}
					}
				}
			}
		}
		
		.ask-question-btn {
			position: fixed;
			right: 16px;
			bottom: 16px;
			width: 56px;
			height: 56px;
			background-color: #007AFF;
			border-radius: 28px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
			
			image {
				width: 24px;
				height: 24px;
				margin-bottom: 4px;
			}
			
			text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}
}

/* 提问弹窗 */
.question-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	
	.modal-content {
		width: 100%;
		background-color: var(--ios-card-bg, #FFFFFF);
		border-radius: 12px 12px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		
		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px;
			border-bottom: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
			
			text {
				font-size: 17px;
				font-weight: 600;
				color: #000;
			}
			
			.close-btn {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 20px;
					height: 20px;
				}
			}
		}
		
		.modal-body {
			padding: 16px;
			
			.question-title-input {
				width: 100%;
				height: 44px;
				background-color: var(--ios-light-bg, #F2F2F7);
				border-radius: 8px;
				padding: 0 12px;
				font-size: 14px;
				margin-bottom: 12px;
			}
			
			.question-content-input {
				width: 100%;
				height: 120px;
				background-color: var(--ios-light-bg, #F2F2F7);
				border-radius: 8px;
				padding: 12px;
				font-size: 14px;
			}
		}
		
		.modal-footer {
			display: flex;
			padding: 16px;
			border-top: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
			
			.cancel-btn, .submit-btn {
				flex: 1;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 22px;
				font-size: 16px;
				font-weight: 500;
				
				&:first-child {
					margin-right: 12px;
				}
			}
			
			.cancel-btn {
				background-color: var(--ios-light-bg, #F2F2F7);
				color: #007AFF;
			}
			
			.submit-btn {
				background-color: #007AFF;
				color: #FFFFFF;
			}
		}
	}
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
	.ios-top-nav {
		background-color: rgba(28, 28, 30, 0.85);
		border-bottom: 0.5px solid var(--ios-separator, rgba(255, 255, 255, 0.15));
		
		.nav-title {
			color: #FFFFFF;
		}
	}
	
	.course-info {
		background-color: #2c2c2e;
		
		.info-header {
			.course-title {
				color: #FFFFFF;
			}
		}
	}
	
	.interaction-section {
		background-color: #2c2c2e;
		
		.section-header {
			border-bottom: 0.5px solid var(--ios-separator, rgba(255, 255, 255, 0.15));
			
			.section-title {
				color: #FFFFFF;
			}
			
			.interaction-tabs {
				background-color: #1c1c1e;
				
				.tab-item {
					&.active {
						color: #0A84FF;
						
						&::after {
							background-color: #0A84FF;
						}
					}
				}
			}
		}
		
		.chat-area {
			.chat-input {
				border-top: 0.5px solid var(--ios-separator, rgba(255, 255, 255, 0.15));
				
				input {
					background-color: #1c1c1e;
					color: #FFFFFF;
				}
			}
		}
		
		.courseware-area {
			.courseware-item {
				background-color: #1c1c1e;
				
				.courseware-details {
					.courseware-name {
						color: #FFFFFF;
					}
				}
			}
		}
		
		.question-area {
			.question-item {
				background-color: #1c1c1e;
				
				.question-title {
					color: #FFFFFF;
				}
				
				.question-content {
					color: #FFFFFF;
				}
			}
		}
	}
	
	.question-modal {
		.modal-content {
			background-color: #2c2c2e;
			
			.modal-header {
				border-bottom: 0.5px solid var(--ios-separator, rgba(255, 255, 255, 0.15));
				
				text {
					color: #FFFFFF;
				}
			}
			
			.modal-body {
				.question-title-input, .question-content-input {
					background-color: #1c1c1e;
					color: #FFFFFF;
				}
			}
			
			.modal-footer {
				border-top: 0.5px solid var(--ios-separator, rgba(255, 255, 255, 0.15));
				
				.cancel-btn {
					background-color: #1c1c1e;
					color: #0A84FF;
				}
			}
		}
	}
}
</style> 